<template>
	<u-tabbar :value="current" @change="selectMenu" :inactiveColor="inactiveColor" :activeColor="activeColor" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
		<u-tabbar-item v-for="(item, index) in tabBarList" :key="index" :text="item.text">
			<image class="icon" slot="inactive-icon" :src="'/' + item.iconPath"></image>
			<image class="icon" slot="active-icon" :src="'/' + item.selectedIconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			activeColor: '#1a90e4', // 选中时的颜色
			inactiveColor: '#000' // 未选中时的颜色
		};
	},
	computed: {
		...mapGetters([
			'tabBarList', // 获取展示的tabBar列表
			'current'
		])
	},
	onLoad() {},
	methods: {
		selectMenu(e) {
			uni.switchTab({
				url: this.tabBarList[e].pagePath
			});
			this.$store.commit('SET_CURRENT', e);
		}
	}
};
</script>

<style>
.icon {
	width: 35rpx;
	height: 35rpx;
}
</style>
